<template>
  <el-card shadow="navar">
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" size="medium" label-width="120px">
        <el-col :span="12">
          <el-form-item label="订单编号" prop="orderNo">
            <el-input
              v-model.trim="formData.orderNo"
              :disabled="disabled"
              placeholder="暂无"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="活动名称" prop="detailName">
            <el-input
              v-model.trim="formData.detailName"
              :disabled="disabled"
              placeholder="暂无"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="核销人员" prop="writeOffUser">
            <el-input
              v-model.trim="formData.writeOffUser"
              :disabled="disabled"
              placeholder="暂无"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="核销时间" prop="writeOffTime">
            <el-date-picker
              v-model.trim="formData.writeOffTime"
              :disabled="disabled"
              type="datetime"
              placeholder="暂无"
              :style="{ width: '100%' }"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="活动类型" prop="activityType">
            <el-select
              v-model.number="formData.activityType"
              :disabled="disabled"
              placeholder="暂无"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="item in dict.type.writeOff_type"
                :key="item.value"
                :label="item.label"
                :value="parseInt(item.value)"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="支付金额" prop="payPrice">
            <el-input
              v-model.number="formData.payPrice"
              :disabled="disabled"
              placeholder="暂无"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户昵称" prop="memberName">
            <el-input
              v-model.trim="formData.memberName"
              :disabled="disabled"
              placeholder="暂无"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户手机号" prop="memberPhone">
            <el-input
              v-model.trim="formData.memberPhone"
              :disabled="disabled"
              placeholder="暂无"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="商品信息">
            <el-table :data="list">
              <el-table-column
                min-width="80"
                label="商品类型"
                align="center"
                prop="serviceType"
              >
                <template slot-scope="scope">
                  {{
                    scope.row.serviceType
                      | typeFilter(dict.type.activity_goodsType)
                  }}
                </template>
              </el-table-column>
              <el-table-column
                min-width="140"
                label="商品名称"
                align="center"
                prop="shoppingServiceName"
              />
              <el-table-column v-if="formData.activityType==1"
                min-width="140"
                label="单价"
                align="center"
                prop="price"
              />
              <el-table-column
                min-width="140"
                label="购买数量"
                align="center"
                prop="number"
              />
            </el-table>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <div class="table-title">核销信息</div>
        </el-col>
        <el-col :span="12">
          <el-form-item label="核销类型" prop="activityType">
            <el-select
              v-model.number="formData.activityType"
              :disabled="disabled"
              placeholder="暂无"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="item in dict.type.writeOff_type"
                :key="item.value"
                :label="item.label"
                :value="parseInt(item.value)"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="核销人员" prop="writeOffUser">
            <el-input
              v-model.trim="formData.writeOffUser"
              :disabled="disabled"
              placeholder="暂无"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="核销时间" prop="writeOffTime">
            <el-input
              v-model.trim="formData.writeOffTime"
              :disabled="disabled"
              placeholder="暂无"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属部门/门店" prop="storeName">
            <el-input
              v-model.trim="formData.storeName"
              :disabled="disabled"
              placeholder="暂无"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="核销商品">
            <el-table :data="formData.writeOffGoods">
              <el-table-column
                min-width="80"
                label="商品类型"
                align="center"
                prop="serviceType"
              >
                <template slot-scope="scope">
                  {{
                    scope.row.serviceType
                      | typeFilter(dict.type.activity_goodsType)
                  }}
                </template>
              </el-table-column>
              <el-table-column
                min-width="140"
                label="商品名称"
                align="center"
                prop="shoppingServiceName"
              />
              <el-table-column
                min-width="140"
                label="单价"
                align="center"
                prop="price"
              />
              <el-table-column
                min-width="140"
                label="核销数量"
                align="center"
                prop="number"
              />
            </el-table>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            size="large"
            :style="{
              textAlign: 'center',
              marginTop: '20px',
            }"
          >
            <el-button @click="goBack">取消</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </el-card>
</template>

<script>
import { getWriteOffById } from '@/api/order/writeoff'
import { getActivityById } from '@/api/order/activity'

export default {
  name: 'activity_detail',
  dicts: ['activity_goodsType', 'writeOff_type'],
  data() {
    return {
      disabled: true,
      formData: {
        orderNo: '',
        detailName: '',
        writeOffUser: '',
        writeOffTime: '',
        activityType: null,
        payPrice: null,
        updateBy: '',
        memberName: '',
        storeName: '',
        updateTime: '',
        memberPhone: '',
        writeOffGoods: [],
      },
      list: [],
    }
  },
  filters: {
    typeFilter(val, type) {
      if (val == null) return null
      let data = type.filter((item) => {
        return val == item.value
      })
      if (data.length) {
        return data[0].label
      } else {
        return val
      }
    },
  },

  mounted() {
    Promise.all([this.getWriteOffById()]).then(([ResultJson1]) => {
      if (this.$route.params.id) {
        this.getActivityById()
      }
    })
  },
  methods: {
    async getActivityById() {
      await getActivityById({ id: this.formData.orderNo }).then((res) => {
        this.list = res.data.serviceInfoList
      })
    },
    async getWriteOffById() {
      await getWriteOffById({ id: this.$route.params.id }).then((res) => {
        this.formData = res.data
      })
    },
    goBack() {
      this.$router.go(-1) // 返回
      //关闭子页面
      this.$store.state.tagsView.visitedViews.splice(
        this.$store.state.tagsView.visitedViews.findIndex(
          (item) => item.path === this.$route.path
        ),
        1
      )
      this.$router.push(
        this.$store.state.tagsView.visitedViews[
          this.$store.state.tagsView.visitedViews.length - 1
        ].path
      )
    },
  },
}
</script>
<style  scoped>
.table-title {
  font-size: 16px;
  font-weight: 700;
  padding: 10px 20px;
  box-sizing: border-box;
  background: #eee;
  margin: 20px 0px;
}
</style>
